import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:get/get.dart';
import 'package:ball_lion/utils/date_time_utils.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/picture_preview_widget.dart';
import 'package:ball_lion/entity/my/help/feedback_entity.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';

class FeedbackDetailPage extends StatefulWidget {
  const FeedbackDetailPage({super.key});

  @override
  State<FeedbackDetailPage> createState() => _FeedbackDetailPageState();
}

class _FeedbackDetailPageState extends State<FeedbackDetailPage> {
  FeedbackEntity? entity = Get.arguments;
  final TextStyle titleStyle = const TextStyle(
      fontSize: 16, color: Colours.text, fontWeight: FontWeight.w500);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: Styles.appBar(title: const QsText("反馈详情")),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              DefaultTextStyle(
                style: const TextStyle(color: Colours.grey99),
                child: Row(
                  children: [
                    QsText(DateTime.tryParse(entity?.createTime ?? "")
                            ?.formatedString('yyyy-MM-dd HH:mm') ??
                        ""),
                    const Spacer(),
                    QsText(entity?.status == 0 ? "未回复" : "已回复"),
                  ],
                ),
              ).paddingOnly(top: 16),
              QsText.style("问题类型：${entity?.typeName ?? ""}", style: titleStyle)
                  .paddingSymmetric(vertical: 12),
              QsText.style("问题描述", style: titleStyle).paddingOnly(bottom: 4),
              QsText(
                      entity?.suggest
                              ?.split("")
                              .map((e) => RegExp(r'[\u4E00-\u9FA5]').hasMatch(e)
                                  ? "$e\u200A"
                                  : e)
                              .join() ??
                          "",
                      textAlign: TextAlign.justify,
                      color: Colours.text44,
                      letterSpacing: -0.8,
                      height: 1.6)
                  .paddingOnly(bottom: 8),
              if (entity?.images.hasValue ?? false)
                GridView.count(
                  physics: const NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  crossAxisCount: 3,
                  crossAxisSpacing: 6,
                  mainAxisSpacing: 6,
                  children: entity?.images?.split(",").map((e) {
                        return GestureDetector(
                          onTap: () => Get.dialog(PicturePreview(imageUrl: e),
                              useSafeArea: false),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(4),
                            child: CachedNetworkImage(
                              imageUrl: e,
                              fit: BoxFit.cover,
                              placeholder: (context, url) => Container(),
                              errorWidget: (context, url, error) => Container(),
                            ),
                          ),
                        );
                      }).toList() ??
                      [],
                ).paddingOnly(bottom: 16),
              if (entity?.reply != null) ...[
                const Divider(color: Colours.greyDD, height: 0.5),
                Row(
                  children: [
                    QsText.style("处理结果", style: titleStyle),
                    const Spacer(),
                    QsText(
                        DateTime.tryParse(entity?.replyTime ?? "")
                            ?.formatedString('yyyy-MM-dd HH:mm'),
                        color: Colours.grey99),
                  ],
                ).paddingOnly(top: 16),
                if (entity?.reply?.contains("<") == true) ...[
                  Html(
                    data: entity?.reply
                            ?.split("")
                            .map((e) => RegExp(r'[\u4E00-\u9FA5]').hasMatch(e)
                                ? "$e\u200A"
                                : e)
                            .join() ??
                        "",
                    style: {
                      "body": Style(
                          margin: Margins.zero, padding: HtmlPaddings.zero),
                      'p': Style(
                          margin: Margins.zero,
                          padding: HtmlPaddings.zero,
                          textAlign: TextAlign.justify,
                          letterSpacing: -0.8,
                          fontSize: FontSize(14),
                          color: Colours.text44),
                    },
                    extensions: [
                      TagExtension(
                          tagsToExtend: {"img"},
                          builder: (extensionContext) {
                            final e = extensionContext.styledElement;
                            return GestureDetector(
                              onTap: () => Get.dialog(
                                  PicturePreview(
                                      imageUrl: e?.attributes['src'] ?? ""),
                                  useSafeArea: false),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(8),
                                child: CachedNetworkImage(
                                  imageUrl: e?.attributes['src'] ?? "",
                                  width: Get.width,
                                  fit: BoxFit.cover,
                                  placeholder: (context, url) => Container(),
                                  errorWidget: (context, url, error) =>
                                      Container(),
                                ),
                              ),
                            );
                          }),
                    ],
                  )
                ] else ...[
                  QsText(
                      entity?.reply
                              ?.split("")
                              .map((e) => RegExp(r'[\u4E00-\u9FA5]').hasMatch(e)
                                  ? "$e\u200A"
                                  : e)
                              .join() ??
                          "",
                      textAlign: TextAlign.justify,
                      color: Colours.text44,
                      letterSpacing: -0.8)
                ]
              ],
            ]),
          ),
        ));
  }
}
